<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<link rel="stylesheet" href="../../static/home/css/roundStyle.css">
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		html,
		body {
			overflow: hidden;
		}

		ul {
			list-style: none;
		}
		@media screen and (max-width: 768px){
			.swiper-navigator {display: none;}
		}
	</style>
</head>
<body>
    <h2 style="color: white;margin-top: 70px;text-shadow: 0px 2px 20px white;text-align: center;">项目展示</h2>
    <div class="swiper-container">
        <ul class="swiper-wrap">
            <li>
                <img src="../../static/home/img/project/2C0A9C7AEC2CAA78CB6CBD01A954D833.jpg">
                <div class="projectFont" style="display: block;">
                    火图网是一个提供： 矢量图、图片素材、网页素材、 ppt、 画册、图标热门主流素材免费下载服务的平台。火图网始终以用户需求为核心，完善的筛选搜索和热门精品素材，方便用户快速找到满意素材。
                </div>
            </li> 
            <li>
                <img src="../../static/home/img/project/6A5D88F1BEEFAB9A441B194C5AD00436.jpg">
                <div class="projectFont">
                    受河南省郑州市122中学委托，设计开发其对外宣传的官网。通过学校官网使得社会各界人士对该学校有了更加深入的了解，接收社会各界人士的建议，发布学校教职工的招聘信息，提高了学校的知名度。
                </div>
            </li>
            <li>
                <img src="../../static/home/img/project/8B710EFA09B4D87359E6F58DF1E2C0EE.jpg">
                <div class="projectFont">
                    作为程序员，我们会经常将自己学到的技术和日常生活感悟分享给大家，所以我们开发了ITAlan博客，广大程序员可以在上面发布博客，分享技术知识。大家也可以在上面寻找自己想要的知识，解决技术上的问题。
                </div>
            </li> 
            <li>
                <img src="../../static/home/img/project/963A881054E65637F5FA928D8C4EE823.jpg">
                <div class="projectFont">
                    项目简介：首创以歌单作为核心架构，满足你跑步、学习、工作、聚会等各种场景的听歌需求。超清画质的MV、令人震撼的CD音质带给你不一样的视听盛宴。用户互动帮你把音乐的乐趣分享给他人。
                </div>
            </li> 
            <li>
                <img src="../../static/home/img/project/33968A9A87DCB05E77255A1D23ED9161.jpg">
                <div class="projectFont">
                    受北京华腾知本图书有限公司委托，设计开发了集学校、班级、学生三级管理模式，包含在线测试与组卷等多个功能为一体的综合自主学习与测试系统，为广大在校学生提供一种新的计算机基础知识学习模式。
                </div>
            </li> 
            <li>
                <img src="../../static/home/img/project/A62CDB9DE16245AE509C8CB5C1F2AA28.jpg">
                <div class="projectFont">
                    受河南科技学院组织部委托，设计开发系统平台，提供对党群机关、行政部门和教学单位的处级干部的年度评价功能，通过相互评价对一个干部的阶段性表现进行综合性评价。
                </div>
            </li> 
            <li>
                <img src="../../static/home/img/project/AC920EB2380CF1A4FE85740F519BADD2.jpg">
                <div class="projectFont">
                    网文不仅仅是一种娱乐，也是一种文化。未来小说网旨在为广大阅读爱好者提供在线观看书籍，写作以及与作家和读者交流的平台。该网站的用户可以观看书籍、和书友分享心得，以及尽情地展示自己的文采。
                </div>
            </li> 
            <li>
                <img src="../../static/home/img/project/B8B77734CBF0EE400C4F989BAF9B1187.jpg">
                <div class="projectFont">
                    小金库是一款经营各种商品的网上商城。为的是让消费者购买到自己想要的商品，为用户带来便捷。该商城会出售较为廉价的商品，为消费者带来实惠。同时，商城会显示热销的商品供消费者选择购买。
                </div>
            </li> 
            <li>
                <img src="../../static/home/img/project/E6A245A90689D60E53BDF91BE084C270.jpg">
                <div class="projectFont">
                    皮皮虾旅游网站是一个服务型平台。是一个满足用户对旅游景点的票务信息、开放时间进行详细了解；对附近酒店的空房情况、消费水平等详细信息进行查询的需求的平台。
                </div>
            </li> 
        </ul>
        <ul class="swiper-dots" style="display: none;"></ul>
        <ul class="swiper-navigator" style="display: none;">
            <li class="swiper-btn-prev">&lt;</li>
            <li class="swiper-btn-next">&gt;</li>
        </ul>
    </div>
    <script src="../../static/home/js/roundIndex.js"></script>
    <script>
        //项目展示的轮播图
        new Swiper(".swiper-container",{
            pagination: ".swiper-dots",
            navigator: {
                prev: ".swiper-btn-prev",
                next: ".swiper-btn-next"
            },
            delay: 5000, // 切换的时间 默认2000
            autoPlay: true // 是否自动切换 默认true
        });
		// const images = document.querySelectorAll('img');

		// const callback = entries =>{
		// 	entries.forEach(entry =>{
		// 		console.log(entry);
		// 		if(entry.isIntersecting){ //目标元素当前是否可见 Boolean值 可见为true
		// 			const image = entry.target;
		// 			const data_src = image.getAttribute('data-src');
		// 			image.setAttribute('src',data_src);
		// 			observer.unobserve(image);
		// 			console.log("触发");
		// 		};
		// 	});
		// };
		// const observer = new IntersectionObserver(callback);
		// images.forEach(image =>{
		// 	observer.observe(image);
		// }); 
	</script>
    <script type="text/javascript" src="../../static/home/js/jquery.min.js"></script>

    <script>
		//此处引用：鼠标滚轮mousewheel插件
	!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});
		
		$(function(){
			var i=3;
			var $btn = parent.$('.section-btn li'),
				$wrap = parent.$('.section-wrap'),
				$arrow = parent.$('.arrow');
			
			/*当前页面赋值*/
			function up(){
                i = 4;
				console.log(i);
			}
			function down(){
				i = 2;
				console.log(i);
			}
			
			/*页面滑动*/
			function run(){
				console.log("run");
				$btn.eq(i).addClass('on').siblings().removeClass('on');	
				$wrap.attr("class","section-wrap").addClass(function() { return "put-section-"+i; }).find('.section').eq(i).find('.title').addClass('active');
			};
			
			/*右侧按钮点击*/
			$btn.each(function(index) {
				$(this).click(function(){
					i=index;
					run();
				})
			});
			
			/*翻页按钮点击*/
			// $arrow.one('click',go);
			// function go(){
			// 	console.log('点击向下翻页啊啊啊')
			// console.log(i)
			// 	// up();run();	
			// 	// setTimeout(function(){$arrow.one('click',go)},1000)
			// };
			
			$(document).bind('mousewheel DOMMouseScroll', function(event) {
					// IE/Chorme
					var wheel = event.originalEvent.wheelDelta;
					// Firefox
					var detal = event.originalEvent.detail;
					// 判断浏览器IE,谷歌滚轮事件
					if(event.originalEvent.wheelDelta) {
						// 当滑轮向上滚动时
						if(wheel > 0) {
							console.log("up");
							up()
						}
						// 当滑轮向下滚动时
						if(wheel < 0) {
							console.log("down");
							down()
						}
						
						setTimeout(function(){
							run();
						},1000)
					}
					// Firefox滚轮事件  
					else if(event.originalEvent.detail) {
						// 当滑轮向下滚动时
						if(detal > 0) {
							console.log("down");
							down()
						}
						// 当滑轮向上滚动时
						if(detal < 0) {
							console.log("up");
							up()
						}
						setTimeout(function(){
							run();
						},1000)
					}
				});
			/*响应键盘上下键*/
			$(document).one('keydown',k);
			function k(event){
				var e=event||window.event;
				var key=e.keyCode||e.which||e.charCode;
				switch(key)	{
					case 38: down();run();	
					break;
					case 40: up();run();	
					break;
				};
				setTimeout(function(){$(document).one('keydown',k)},1000);
			}
			// 监听触摸屏
		let box = document.querySelector('body') // 监听对象
			let startTime = '' // 触摸开始时间
			let startDistanceX = '' // 触摸开始X轴位置
			let startDistanceY = '' // 触摸开始Y轴位置
			let endTime = '' // 触摸结束时间
			let endDistanceX = '' // 触摸结束X轴位置
			let endDistanceY = '' // 触摸结束Y轴位置
			let moveTime = '' // 触摸时间
			let moveDistanceX = '' // 触摸移动X轴距离
			let moveDistanceY = '' // 触摸移动Y轴距离
			box.addEventListener("touchstart", (e) => {
				startTime = new Date().getTime()
				startDistanceX = e.touches[0].screenX
				startDistanceY = e.touches[0].screenY
				console.log("开始")
			})
			box.addEventListener("touchend", (e) => {
				endTime = new Date().getTime()
				endDistanceX = e.changedTouches[0].screenX
				endDistanceY = e.changedTouches[0].screenY
				moveTime = endTime - startTime
				moveDistanceX = startDistanceX - endDistanceX
				moveDistanceY = startDistanceY - endDistanceY
				console.log(moveDistanceX, moveDistanceY)
				// target = e.target || e.srcElement;
				// if(target.getAttribute('class') === "arrow"){
				// if(Math.abs(moveDistanceX) < 2 && Math.abs(moveDistanceY) < 2){
				// 	up()
				// 	run()
				// }
			// }
				// 判断滑动距离超过40 且 时间小于500毫秒
				if ((Math.abs(moveDistanceX) > 40 || Math.abs(moveDistanceY) > 40) && moveTime < 500) {
					// 判断X轴移动的距离是否大于Y轴移动的距离
					if (Math.abs(moveDistanceX) > Math.abs(moveDistanceY)) {
					// 左右
					console.log(moveDistanceX > 0 ? '左' : '右')
					} else {
					// 上下
					console.log(moveDistanceY > 0 ? '上' : '下')
						if(moveDistanceY>0){
							up();
						}else{
							down();
						}
						run();
					}
				}
				console.log("结束")
			})
		});
	</script>
</body>
</html>